<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>AjaxObject Test Page</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/button/assets/skins/sam/button.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/json/json.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/cookie/cookie.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<script type="text/javascript" src="../assets/js/widget/AjaxObject.js"></script>

<!--begin custom header content for this example-->
<style type="text/css">
#controls label  
	{
		clear: left;
		float: left;
		width: 15em;
	}

	ul li {
		list-style:none;
	}

	ul li select {
		width: 15em;
	}

</style>

<!--end custom header content for this example-->

</head><body class="yui-skin-sam">


<h1>AjaxObject Test Page</h1>

<div class="exampleIntro">
	<p>
		This example shows how to use the <a href="http://code.google.com/p/yui-ext-mvc/source/browse/trunk/assets/js/widget/AjaxObject.js">AjaxObject</a> class.
		AjaxObject has a variety of configuration parameters, each of which can be modified here.
	</p>
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<!--Input Controls-->

<ul id="controls">
	<li>
		<label for="abortOnDuplicate">Abort on duplicate:</label>
		<select id="abortOnDuplicate">
			<option value="false">false</option>
			<option value="true" selected="selected">true</option>
		</select>
	</li>

	<li>
		<label for="argument">Argument to passthrough:</label>
		<select id="argument">
			<option value="null">null</option>
			<option value="testArgument" selected="selected">testArgument</option>
		</select>
	</li>

	<li>
		<label for="cache">Cache the request:</label>
		<select id="cache">
			<option value="false" selected="selected">false</option>
			<option value="true">true</option>
		</select>
	</li>

	<li>
		<label for="data">Data:</label>
		<select id="data">
			<option value="null" selected="selected">null</option>
			<option value="testName1=testValue1&testName2=testValue2">testName1=testValue1&testName2=testValue2</option>
			<option value="['testName1=testValue1','testName2=testValue2']">['testName1=testValue1','testName2=testValue2']</option>
			<option value="{testName1:'testValue1',testName2:testValue2'}">{testName1:'testValue1',testName2:testValue2'}</option>
		</select>
	</li>

	<li>
		<label for="method">Method for the request:</label>
		<select id="method">
			<option value="get" selected="selected">get</option>
			<option value="post">post</option>
		</select>
	</li>

	<li>
		<label for="pollTimeout">Poll timeout of request:</label>
		<select id="pollTimeout">
			<option value="0" selected="selected">0</option>
			<option value="250">250ms</option>
			<option value="500">500ms</option>
			<option value="750">750ms</option>
			<option value="1000">1000ms</option>
		</select>
	</li>

	<li>
		<label for="requestDelay">Request delay:</label>
		<select id="requestDelay">
			<option value="0" selected="selected">0</option>
			<option value="250">250ms</option>
			<option value="500">500ms</option>
			<option value="750">750ms</option>
			<option value="1000">1000ms</option>
		</select>
	</li>

	<li>
		<label for="timeout">Timeout of request:</label>
		<select id="timeout">
			<option value="5000">5s</option>
			<option value="10000" selected="selected">10000s</option>
			<option value="15000">15000s</option>
			<option value="17500">17500s</option>
			<option value="20000">20000s</option>
		</select>
	</li>

	<li>
		<label for="seltype">Response type:</label>
		<select id="seltype">
			<option value="text/json">text/json</option>
			<option value="text/xml" selected="selected">text/xml</option>
			<option value="application/xml">application/xml</option>
		</select>
	</li>

	<li>
		<label for="url">Url:</label>
		<select id="url">
			<option value="/test_json.php">test_json.php</option>
			<option value="/test_xml.xml" selected="selected">test_xml.xml</option>
			<option value="/test_timeout.xml">test_timeout.xml</option>
			<option value="/test404.php">test404.php</option>
		</select>
	</li>
	
	<li><input id="exe-button" name="exe-button" type="Button" value="Execute Request" /></li>

</ul>

<h3>Last Response</h3>
<div id="content"></div>

<!--Local Scripts-->
<script type="text/javascript"><!--
(function() {
	var LANG = YAHOO.lang,
		DOM = YAHOO.util.Dom;
	
	Object.toQueryString = function(data, encode) {
		var sb = [],
			i = 0;

		for (var k in data) {
			var v = data[k];
			
			// only care about strings and numbers
			if (LANG.isString(v) || LANG.isNumber(v)) {
				sb[i] = (k + '=' + v);
				i += 1;
			}
		};

		return encode ? encodeURIComponent(sb.join('&')) : sb.join('&');
	};

	DOM.isTextNode = function(elem) {
		var node = DOM.get(elem),
			isValidNode = node && node.nodeType; // not calling isNodeOfType because this is faster

		return isValidNode && (4 === node.nodeType || 8 === node.nodeType || 3 === node.nodeType);
	};

	DOM.getContentAsString = function(elem) {
		/*
		 * Returns the elements content of nodes as a string.
		 */
		var _getContentAsString = window.XMLSerializer ? function(nodes) { // mozilla
			var xmlSerializer = new XMLSerializer(),
				sb = [];

			for (var i in nodes) {
				var node = nodes[i];
				if (node.nodeType) {
					sb[i] = (4 === node.nodeType) ? node.nodeValue : xmlSerializer.serializeToString(node);
				}
			};

			return sb.join('').replace(/(\<textarea[^\<]*?)\/\>/, '$1>&nbsp;</textarea>');
		} : function(nodes) { // IE
			var sb = [];

			for (var i in nodes) {
				var node = nodes[i];
				if (node.nodeType) {
					sb[i] = (DOM.isTextNode(node)) ? node.nodeValue : node.xml || node.innerHTML;
				}
			};

			return sb.join('').replace(/\/?\>\<\/input\>/gi, '\/>'); // IE tends to insert a bogus "</input>" element instead of understanding empty closure "<input ... />"
		};

		DOM.getContentAsString = function(elem) {
			var parentNode = DOM.get(elem);

			if (! parentNode || ! parentNode.childNodes.length) {return '';}

			if (DOM.isTextNode(parentNode.firstChild) && 1 === parentNode.childNodes.length) {
				return parentNode.firstChild.nodeValue;
			}
			else {
				return _getContentAsString(parentNode.childNodes);
			}
		};

		return DOM.getContentAsString(elem);
	};

	DOM.selectOne = function(element) {
		var value = '', opt, index = element.selectedIndex;
		if (0 <= index) {
			opt = element.options[index];
			value = opt.value || opt.text;
		}
		return value;
	};

	Boolean.get = function(value) {
		return value && 'true' === ('' + value).toLowerCase();
	};

	Number.get = function(value) {
		return parseInt(value, 10);
	};

	var _handleSuccess = function(o) {
		content.innerHTML = LANG.isArray(o.response) ? o.responseText : DOM.getContentAsString(o.response).replace(/</g, '&lt;').replace(/>/, '&rt;');
	};

	YAHOO.util.AjaxObject.LOGOUT_URL = 'test_ajaxObject.html?nextPage=';
	var exeButton = new YAHOO.widget.Button("exe-button"),
		selectAbortOnDuplicate = DOM.get('abortOnDuplicate'),
		selectArgument = DOM.get('argument'),
		selectCache = DOM.get('cache'),
		selectData = DOM.get('data'),
		selectMethod = DOM.get('method'),
		selectPollTimeout = DOM.get('pollTimeout'),
		selectTimeout = DOM.get('timeout'),
		selectRequestDelay = DOM.get('requestDelay'),
		selectType = DOM.get('seltype'),
		selectUrl = DOM.get('url'),
		content = DOM.get('content'),
		ajaxObject = new YAHOO.util.AjaxObject({callback: _handleSuccess, url: '/test_xml.xml'});

	exeButton.on('click', function() {
		var cfg = {
			abortOnDuplicate: Boolean.get(DOM.selectOne(selectAbortOnDuplicate)),
			argument: DOM.selectOne(selectArgument),
			cache: Boolean.get(DOM.selectOne(selectCache)),
			data: eval(DOM.selectOne(selectData)),
			method: DOM.selectOne(selectMethod),
			pollTimeout: Number.get(DOM.selectOne(selectPollTimeout)),
			timeout: Number.get(DOM.selectOne(selectTimeout)),
			requestDelay: Number.get(DOM.selectOne(selectRequestDelay)),
			type: DOM.selectOne(selectType),
			url: DOM.selectOne(selectUrl)
		};
		ajaxObject.startRequest(cfg);
	});
}());
//-->
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body></html>